<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body style="height: 100%; margin: 0">
<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%"></div>
	<script type="text/javascript" src="/js/echarts.min.js"></script>
	<script type="text/javascript">
		var dom = document.getElementById("container");
		var myChart = echarts.init(dom);
		var app = {};

		var option;

		var dataAxis = [ '用户数量', '部门数量', '员工数量', '资产总量', '资产借出', '资产报废',
				'资产维修', '资产归还' ];
		var data = [ ${countVo.num1}, ${countVo.num2}, ${countVo.num3}, ${countVo.num4}, ${countVo.num5}, ${countVo.num6}, ${countVo.num7}, ${countVo.num8} ];
		var yMax = 50;
		var dataShadow = [];

		for (var i = 0; i < data.length; i++) {
			dataShadow.push(yMax);
		}

		option = {
			title : {
				text : '统计分布直方图',
				subtext : 'Statistical distribution histogram'
			},
			xAxis : {
				data : dataAxis,
				axisLabel : {
					inside : true,
					textStyle : {
						color : '#fff'
					}
				},
				axisTick : {
					show : false
				},
				axisLine : {
					show : false
				},
				z : 10
			},
			yAxis : {
				axisLine : {
					show : false
				},
				axisTick : {
					show : false
				},
				axisLabel : {
					textStyle : {
						color : '#999'
					}
				}
			},
			dataZoom : [ {
				type : 'inside'
			} ],
			series : [ {
				type : 'bar',
				showBackground : true,
				itemStyle : {
					color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
						offset : 0,
						color : '#83bff6'
					}, {
						offset : 0.5,
						color : '#188df0'
					}, {
						offset : 1,
						color : '#188df0'
					} ])
				},
				emphasis : {
					itemStyle : {
						color : new echarts.graphic.LinearGradient(0, 0, 0, 1,
								[ {
									offset : 0,
									color : '#2378f7'
								}, {
									offset : 0.7,
									color : '#2378f7'
								}, {
									offset : 1,
									color : '#83bff6'
								} ])
					}
				},
				data : data
			} ]
		};

		// Enable data zoom when user click bar.
		var zoomSize = 6;
		myChart.on('click',
				function(params) {
					console.log(dataAxis[Math.max(params.dataIndex - zoomSize
							/ 2, 0)]);
					myChart.dispatchAction({
						type : 'dataZoom',
						startValue : dataAxis[Math.max(params.dataIndex
								- zoomSize / 2, 0)],
						endValue : dataAxis[Math.min(params.dataIndex
								+ zoomSize / 2, data.length - 1)]
					});
				});

		if (option && typeof option === 'object') {
			myChart.setOption(option);
		}
	</script>
</body>


</html>